<template>
	<div class="bigdiv"  v-show="showState">
			<div class="dltitle">注册新账号
			<div class="revert"  v-on:click="changezc" ></div>
			</div>
			<div class="jump">	
				<div class="main">
			
						<input class="sjzc" type="text" name="" id="" placeholder="输入手机号，仅限中国大陆手机号码" />
				
						<input class="szmm" type="text" name="" id="" placeholder="设置登录密码,不少于6位" />
						
						<input class="zcan" type="submit" value="注册" @click="tijiao"/>
						<div class="alj">已有账号?<a href="#">点此登录</a></div>
				</div>
			</div>
			<div class="other">
				第三方账号登录/注册
				<div class="mode">
					<div class="modes">
						<img src="../../img/wxin.png"/>
						<p>微信</p>
					</div>
					<div class="modes">
						<img src="../../img/xlwb.png"/>
						<p>新浪微博</p>
					</div>
					<div class="modes">
						<img src="../../img/txqq.png"/>
						<p>QQ</p>
					</div>
					<div class="modes">
						<img src="../../img/txwb.png"/>
						<p>腾讯微博</p>
					</div>
				</div>
			</div>
		</div>
</template>

<script>
	
		export default {
		computed: {
			showState(){
				// 获取仓库当中的状态值
				return this.$store.state.zhuceState;
			}
		},
		methods:{
			changezc(){
				this.$store.commit('changeZhuce');
			},
			tijiao(){
				this.$http({
					method:'GET',
					url:'http://localhost:8080/zhuce'
				}).then(function(req){
					console.log(req)
				})
			}
		}
	}
</script>

<style scoped>
		.bigdiv{
				width: 100%;
				height: 100%;
				background-color: #fff;
				position: absolute;
				z-index:111111111111113;
			}
			
			.dltitle{
				width: 100%;
				height: 1.413043rem;
				line-height: 1.413043rem;
				text-align: center;
				font-size: 0.521739rem;
				position: relative;
				background-color: #fbfbfb;
	
				
			}
			
			.revert{
				width: 0.434782rem;
				height: 0.652173rem;
				position: absolute;
				top: 0.4rem;
				left: 0.434782rem;
				background: url(../../img/lfjt.png) center center no-repeat;
				background-size: 100%;
			}
			.jump{
				width: 100%;
				height: 11.195652rem;
				/*padding-top: 70%;*/
			}
			.main{
				width: 100%;
				height: 5.865217rem;
				/*background-color: red;*/
				text-align: center;
				position: relative;
			}
			.sjzc{
				width: 70%;
				height: 1rem;
				line-height: 1rem;
				padding-left: 0.869565rem;
				font-size: 0.391304rem;
				margin-top: 0.434782rem;
				border-radius: 0.217391rem;
				background: url(../../img/sjktb.png) 4% center no-repeat;
				background-size:5%;
				border:  solid 0.021739rem #f3f3f3;
				outline: 0;
			}
			.szmm{
				width: 70%;
				height: 1rem;
				line-height: 1rem;
				padding-left: 0.869565rem;
				font-size: 0.391304rem;
				margin-top: 0.534782rem;
				border-radius: 0.217391rem;
				background: url(../../img/zcmm.png) 4% center no-repeat;
				background-size:5%;
				border:  solid 0.021739rem #f3f3f3;
				outline: 0;
			}
			.zcan{
				width: 80%;
				height: 1rem;
				background-color: #e6524e;
				color: #fff;
				border-radius: 0.217391rem;
				margin-top: 0.869565rem;
				font-size: 0.47826rem;
			}
			.alj{
				position: absolute;
				right: 0.326086rem;
				bottom: 0;
			}
			.other{
				width: 100%;
				height: 5.108695rem;
				text-align: center;
				color: #d0d0d0;
			}
			.mode{
				width: 100%;
				height: 2.173913rem;
				margin-top: 1.086956rem;
				display: flex;
				color: #5f5f5f;
				
			}
			.modes{
				width: 25%;
			}
			.modes p{
				margin-top: 0.108695rem;
			}
</style>